<script setup>
const props = defineProps({
  comment: {
    type: Object,
    default: {
      id: 1,
      userName: '张三',
      comment: '这是一条评论',
      createTime: new Date()
    }
  }
})
// 格式化日期
const formatDate = (date) => {
  return new Date(date).toLocaleString()
}
</script>

<template>
  <div class="comment-info">
    <div class="comment-user">{{ comment.userName }}</div>
    <div class="comment-text">{{ comment.comment }}</div>
    <div class="comment-time">{{ formatDate(comment.createTime) }}</div>
  </div>
</template>

<style scoped lang="less">
.comment-info {
  padding: 10px;
  border-bottom: 1px solid #ccc;

  .comment-user {
    font-size: 14px;
    color: #333;
    margin-bottom: 5px;
    font-weight: bold;
  }

  .comment-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
  }

  .comment-time {
    font-size: 12px;
    color: #999;
  }
}
</style>
